<!-- 专家首页 -->
<template>
	<view class="tabsFlex1">
		<view class="headBox" :style="headStyle">
			<view class="disFlxAC">
				<view class="headImg">
					<image
						v-if="expInfo.headimg"
						:src="expInfo.headimg"
						mode="aspectFill"
						style="width: 100%; height: 100%"
					/>
					<u-icon v-else name="account" color="#FFFFFF" size="40"></u-icon>
				</view>
				<view>
					<view class="fz-18 fw-6 ov-1">
            <text>{{ expInfo.userName || "请完善信息" }}</text>
            <text v-if="expInfo.postName" class="pl-5 fz-14 color6 fw-4">{{ expInfo.postName }}</text>
          </view>
          <view v-if="expInfo.com" class="pt-4 color9">{{ expInfo.com }}</view>
				</view>
				<view class="toggleBox fz-12 colorZS disFlxAC shrink0" @click.stop="toggleShow = true">
					<image src="@/static/image/toggle.png" style="width: 36rpx" mode="widthFix" />
					<text class="pl-2">医生</text>
				</view>
			</view>
		</view>

		<view class="disFlxJS bgf mb-15 pt-15 pb-15">
			<view style="width: 50%" class="disFlxCC" @click="goStatistics">
				<image
					src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/icon_tonji.png"
					style="width: 80rpx; height: 80rpx"
				/>
				<view class="pt-5">审证审方统计</view>
			</view>
			<view style="width: 50%" class="disFlxCC" @click="goSetting">
				<image
					src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/icon_shezhi.png"
					style="width: 80rpx; height: 80rpx"
				/>
				<view class="pt-5">审证审方设置</view>
			</view>
		</view>

		<view class="bgf mb-15">
			<view class="px-15 pt-10">
				<u-search
					v-model="getParams.keyword"
					height="80rpx"
					placeholder="单位 / 医生 / 患者搜索"
					:animation="true"
					@search="search"
					@custom="search"
					@clear="search('')"
				></u-search>
			</view>
			<u-tabs :list="tabsList" style="width: 100%" @change="tabsChange"></u-tabs>
		</view>

		<view class="mx-10 pb-15">
			<view
				v-for="(item, idx) in list"
				:key="idx"
				class="bgf pa-10 mt-10"
				style="border-radius: 10rpx"
				@click="goDetails(item)"
			>
				<view class="disFlxJS pb-10">
					<view>{{ item.applyDate }}</view>
					<view v-if="item.apStatus === 2" class="u-error">已驳回</view>
					<view v-else-if="item.apStatus === 1" class="colorZS">已通过</view>
					<view v-else class="u-warning">待审核</view>
				</view>
				<view class="linh-24">
					<text class="color9 pr-5">申请机构: </text>
					<text>{{ item.applyCompanyName }}</text>
				</view>
				<view class="linh-24 disFlxAC">
					<text class="color9 pr-5">申请医生: </text>
					<text class="pr-5">{{ item.applyExpertName }}</text>
					<image
						@click.stop="callOut(item.applyExpertPhone)"
						src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/icon_dial.png"
						style="width: 40rpx; height: 40rpx"
					/>
				</view>
				<view class="linh-24">
					<text class="color9 pr-5">患者信息: </text>
					<text>{{ item.patientName }}</text>
					<text class="pl-5">{{ item.patientSex == 1 ? "女" : "男" }}</text>
					<text class="pl-5">{{ item.patientAge }}岁</text>
				</view>
				<view class="linh-24">
					<text class="color9 pr-5">诊断证型: </text>
					<text>{{ item.typesResult }}</text>
				</view>
			</view>
      <view class="defaultPage disFlxCC py-50" v-if="!list.length && listLoad">
        <image src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/empty3.png" style="width:140rpx;height:140rpx;" />
        <view class="pt-8 pb-47 color9">暂无订单</view>
      </view>
		</view>
    <ToggeleId :show="toggleShow" defaultValue="expert" @close="toggleShow = false" />
	</view>
</template>

<script>
import ToggeleId from "@/components/toggeleId";
import expApi from "@/api/expertIdentity.js";
export default {
	components: {
		ToggeleId,
	},
	computed: {
		// 头部样式
		headStyle() {
			return `padding-top: ${this.$store.state.deviceInfo.statusBarHeight + 35}px;`;
		},
		expInfo() {
			return this.$store.state.expInfo;
		},
	},
	data() {
		return {
			toggleShow: false,
			getParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
				status: 0,
				keyword: "",
			},
			tabsList: [
				{
					name: "待审核",
					value: 0,
				},
				{
					name: "已通过",
					value: 1,
				},
				{
					name: "已驳回",
					value: 2,
				},
			],
      list: [],
      listLoad: false, // 加载是否完成
		};
	},
	onLoad() {
		this.$store.commit("SET_USERTYPE", 0);
		this.tabsChange({ value: 0 });
	},
  // 下拉刷新
  async onPullDownRefresh() {
    await this.search('');
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  // 加载更多
  onReachBottom() {
    if(this.getParams.total > this.list.length){
      this.getParams.pageNum ++;
      this.getList();
    }
  },
	methods: {
		async getList() {
      const { data, total } = await expApi.orderList(this.getParams).finally(()=>{this.listLoad = true});
      this.list = this.getParams.pageNum === 1 ? data : [...this.list, ...data];
      this.getParams.total = total;
		},
    // 切换订单状态筛选
		tabsChange(e) {
      Object.assign(this.$data.getParams, this.$options.data().getParams);
      this.listLoad = false;
			this.getParams.status = e.value;
			this.getList();
		},
    async search(e){
      this.listLoad = false;
      this.getParams.keyword = e;
      this.getParams.pageNum = 1;
      await this.getList();
    },
		// 拨打电话
		callOut(cellPhone) {
			if (!cellPhone) return;
			uni.makePhoneCall({
				phoneNumber: cellPhone,
			});
		},
    // 订单详情
		goDetails(item) {
			this.goPage(`/expertIdentity/prescription/audit?id=${item.id}`);
		},
		goSetting() {
			this.goPage("/expertIdentity/prescription/setting");
		},
		goStatistics() {
			this.goPage("/expertIdentity/prescription/statistics");
		},
	},
};
</script>
<style lang="scss" scoped>
.tabsFlex1 {
	min-height: 100vh;
	background-color: #f5f5f5;
	.headBox {
		color: #333333;
		padding-bottom: 44rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		.headImg {
			width: 128rpx;
			height: 128rpx;
			border: solid 2px #ffffff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			margin-right: 32rpx;
			flex-shrink: 0;
		}
		.tag {
			background-color: #ffffff;
			border-radius: 50rpx;
			line-height: 40rpx;
			color: #808080;
			font-size: 24rpx;
			padding: 0 18rpx;
			margin-top: 16rpx;
		}
		.tag + .tag {
			margin-left: 16rpx;
		}
	}

	.toggleBox {
		border: solid 1px #2dbcbe;
		padding: 2rpx 20rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
	}
}
</style>
